<!--  表格组件 -->
<template>
    <div class="table-normal">
        <table
                data-id="bsTable"
                ref="bsTable"
                class="bsTable table table-hover table-striped table-borderless child-dom"
                @click="handleClick"
                @dblclick="doubleClickRow"
        ></table>
    </div>
</template>
<style scoped>
    .table {
        color: #ffffff !important;
        margin-top: 0 !important;
    }

    .table-normal
    /deep/
    .bootstrap-table
    .fixed-table-container
    .fixed-table-header {
        display: none !important
    }
</style>
<script>
    import {fetch, post} from "../../axios/http"
    export default {
        name: "dcimTable",
        props: {
            // showFooter: {
            //     // 是否显示表格脚部
            //     type: Boolean,
            //     default: function () {
            //         return false;
            //     }
            // },
            sortStable: { // 是否排序
                type: Boolean,
                default: function () {

                    return false

                }
            },
            sortName: {
                type: String,
                default: () => {
                    return ''
                }
            }, // 默认排序列
            sortOrder: { // 排序类型
               type: String,
               default: function () {
                   return 'desc'
               }
            },
            isData: {
                // 是否获取表格中所有的数据
                type: Boolean,
                default: function () {
                    return false
                }
            },
            disabled: {
                // 是否允许checkbox置灰
                type: Boolean,
                default: function () {
                    return false
                }
            },
            refresh: {
                type: Boolean,
                default: function () {
                    // 是否重新加载表格，默认false
                    return false
                }
            },
            searchName: String, // 搜索的字段名
            searchPlaceholder: {
                // 搜索框中的placeHolder设置
                type: String,
                default: function () {
                    return "搜索"
                }
            },
            rowsDoubleClick: {
                type: Boolean,
                default: function () {
                    // 表格行双击事件，true可双击，false无双击；默认false
                    return false
                }
            },
            ajaxData: {
                // 异步请求数据，key[url, method, params],method不传默认get请求
                type: Object,
                default: function () {
                    return {
                        method: "get",
                        params: {}
                    };
                }
            },
            height: {
                // 表格高度，不传默认500
                type: Number,
                default: function () {
                    return 500
                }
            },
            sequenceNumber: {
                // 是否显示序号，默认显示
                type: Boolean,
                default: function () {
                    return true
                }
            },
            checkBox: {
                // 是否显示单选框，默认不显示
                type: Boolean,
                default: function () {
                    return false
                }
            },
            showColumns: {
                // 是否显示内容下拉框，默认不显示
                type: Boolean,
                default: function () {
                    return false
                }
            },
            search: {
                // 是否显示搜索框，默认不显示
                type: Boolean,
                default: function () {
                    return false
                }
            },
            pageSize: {
                // 每页显示多少条数据，默认10条
                type: Number,
                default: function () {
                    return 10
                }
            },
            showRefresh: {
                // 是否显示刷新按钮，默认false不显示
                type: Boolean,
                default: function () {
                    return false
                }
            },
            clickToSelect: {
                // 是否允许点击整行选中，默认true，可以点击整行选中
                type: Boolean,
                default: function () {
                    return true
                }
            },
            singleSelect: {
                // 是否可以多选，默认false可以多选
                type: Boolean,
                default: function () {
                    return false
                }
            },
            pagination: {
                // 分页参数，不传默认为true
                type: Boolean,
                default: function () {
                    return true
                }
            },
            queryParamsFunction: {
                // 传到后台的参数集合
                type: Function
            },
            sortable: {
                // 排序，默认false
                type: Boolean,
                default: function () {
                    return false
                }
            },
            columns: {
                type: Array
            },
            pageNumber: {
                type:Number,
                default: function() {
                    return 1
                }
            }
        },
        data() {
            return {
                staticOptions: {
                    locale: "zh-CN",
                    iconSize: "outline",
                    striped: true,
                    dataType: "json",
                    toggle: "bsTable",
                    pageNumber: 1,
                    sidePagination: "server",
                    classes: "table-striped table-borderless"
                },
                loadTableData: true,
                resultOptions: {},
                tableData: null,
                offsetResult: 0
            };
        },
        watch: {
            refresh: function (val) {
                const $this = this;
                if (val) {
                    const ele = $this.$refs.bsTable;
                    //$this.$(ele).bootstrapTable("refresh");
                    //$this.$(ele).bootstrapTable('selectPage', 1)
                    console.log('table中的页面', $this.pageNumber)
                    $(ele).bootstrapTable("refreshOptions", {pageNumber : $this.pageNumber})    // 执行刷新并为第一页
                }
            }
        },
        mounted() {
            this.loadTable();
        },
        methods: {
            /**
             * 表格数据加载
             */
            loadTable() {
                const $this = this;
                const bsTable = $this.$refs.bsTable
                const obj = $(bsTable)

                if ($this.sequenceNumber) {
                    $this.columns.unshift({
                        field: "id",
                        title: "序号",
                        sortable: $this.sortable,
                        formatter: function (value, row, index) {
                            const options = obj.bootstrapTable("getOptions"),
                                pageSize = options.pageSize, //通过表的#id 可以得到每页多少条
                                pageNumber = options.pageNumber; //通过表的#id 可以得到当前第几页

                            return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                        }
                    })
                }

                if ($this.checkBox) {
                    $this.columns.unshift({
                        checkbox: true
                    });
                }

                const options = {
                    ajax: function (params) {
                        const tableEle = $(bsTable)

                        if ($this.refresh) {
                            params.data.search = ""
                        }

                        const paramsSet = $this.paramsData(params)
                        const ajaxFun = $this.ajaxType(paramsSet)

                        tableEle.find(".no-records-found").hide()

                        try {
                            ajaxFun.then(function (res) {
                                $this.$emit("responseData", res)

                                const data = $this.filterTableData(res)
                                // const data = res.data

                                if (res.resultCode === 200) {
                                    $this.tableData = data.rows ? data.rows : data.data

                                    tableEle.bootstrapTable("load", data)

                                    $(".fixed-table-loading").hide()
                                    tableEle.find(".no-records-found").show()

                                    $(".bootstrap-table .fixed-table-container .fixed-table-body").css('overflow', 'initial')

                                    if ($this.showFooter) {
                                        $this.$healps.setScrollBar(
                                            $(".bsTable .fixed-table-body")
                                        );
                                    } else {
                                        $this.$healps.setScrollBar(
                                            $(".table-normal .fixed-table-container")
                                        );
                                    }

                                    $this.$healps.setScrollBar($(".dropdown-menu"))

                                    if ($this.isData) {
                                        $this.$emit("data", data.rows)
                                    }
                                }
                            });
                        } catch (e) {
                            console.log(e);
                        } finally {
                            $(".fixed-table-loading").hide()
                            tableEle.find(".no-records-found").show()
                        }
                    }, // 服务器数据的加载地址
                    height: $this.height,
                    pagination: $this.pagination, // 设置为true会在底部显示分页条
                    singleSelect: $this.singleSelect, // 设置为true将禁止多选
                    clickToSelect: $this.clickToSelect, //设置为点击该行则整行都可以选择复选框
                    showRefresh: $this.showRefresh, //是否显示刷新按钮
                    // contentType : "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
                    pageSize: $this.pageSize, // 如果设置了分页，每页数据条数
                    search: $this.search, // 是否显示搜索框
                    sortStable: $this.sortStable, // 是否排序
                    sortOrder: $this.sortOrder, // 排序
                    sortName: $this.sortName, // 默认排序列
                    showColumns: $this.showColumns, // 是否显示内容下拉框（选择显示的列）
                    columns: $this.columns
                }

                $this.staticOptions.toggle = $(bsTable).data("id")

                const optionsAll = $.extend(true, $this.staticOptions, options)

                $this.resultOptions = optionsAll

                $(bsTable).bootstrapTable(optionsAll)

                $this
                    .$(".fixed-table-toolbar .search > input")
                    .attr("placeholder", $this.searchPlaceholder)
            },
            filterTableData(obj) {
                const $this = this
                let data = null

                if ($this.pagination) {
                    let total = 0

                    for (let item in obj) {
                        if (item === "total") {
                            data = obj

                            total = obj.total
                        } else {
                            if (obj[item].total >= 0) {
                                data = obj[item]

                                total = obj[item].total
                            }
                        }
                    }

                    $this.$emit("total", total)
                } else {
                    data = obj.length > 0 ? obj : obj.data
                }

                return data
            },
            ajaxType(params) {
                const $this = this
                let ajaxFun = null

                if ($this.ajaxData.method === "post") {
                    ajaxFun = post($this.ajaxData.url, params)
                } else {
                    ajaxFun = fetch($this.ajaxData.url, params)
                }

                return ajaxFun;
            },
            paramsData(obj) {
                const $this = this
                // const offsetResult = $this.offsetResult,
                    //   offsetData = obj.data.offset

                let paramsObj = {}

                if ($this.pagination) {
                    
                    // if (offsetResult !== offsetData) {

                    //     $this.offsetResult = offsetData

                    // } else {

                    //     obj.data.offset = 0

                    // }

                    const params = {

                        limit: obj.data.limit,

                        offset: obj.data.offset

                    }
                    

                    if ($this.sortStable) {

                        params.order = obj.data.order

                        params.sort = obj.data.sort

                    }
                    // $this.sortStable ? params.order = obj.data.order : ''

                    // 设置分页传参数据
                    paramsObj = $.extend(true, $this.ajaxData.params, params)

                    if ($this.search) {

                        // 如果设置了搜索，就添加搜索的值
                        paramsObj[$this.searchName] = obj.data.search

                    }

                } else {

                    paramsObj = $this.ajaxData.params

                }

                return paramsObj
            },
            /**
             * 表格双击事件
             * @param e
             * @returns {boolean}
             */
            doubleClickRow(e) {
                const $this = this

                if (!$this.rowsDoubleClick) {
                    return false
                }

                if ($($this.$(e.target).parent()).hasClass("btn")) {
                    return false
                }

                const tr = $(e.target).parent("tr")

                if (tr) {
                    const index = $(tr).data("index"),
                        rowData = $this.tableData[index]

                    $this.$emit("doubleClickRow", e.target, rowData)
                }
            },
            /**
             * 表格操作事件
             * @param e
             */
            handleClick(e) {
                const $this = this
                const self = $(e.target)
                let obj = null

                if ($this.checkBox) {
                    const selections = JSON.stringify(
                        $($this.$refs.bsTable).bootstrapTable("getSelections")
                    );
                    $this.$emit("getSelections", selections)
                }

                self.hasClass("btn") || self.hasClass("dcim") ? obj = self : obj = self.parent()

                if (!(obj.hasClass("btn") || obj.hasClass("dcim"))) return

                const row = $this.tableData[obj.data("index")]

                // if (obj.data("index") >= 0) {
                //     row = $this.tableData[obj.data("index")]
                // }

                $this.$emit("handleClick", obj, row)
            }
        }
    };
</script>
